<template>
  <s-page custom-class="SwipeAction-Page">
    <view class="container">
      <c-demo-block title="基础用法">
        <s-swipe-action>
          <s-cell title="单元格" :border="false" />
          <view slot="right" style="height: 100%">
            <s-button type="danger" shape="square" height="100%" text="删除" />
            <s-button type="primary" shape="square" height="100%" text="收藏" />
          </view>
        </s-swipe-action>
      </c-demo-block>

      <c-demo-block title="自定义内容">
        <s-swipe-action>
          <view style="padding: 30rpx; background-color: white">
            <s-row :gutter="20">
              <s-col>
                <s-image src="/static/imgs/banner-1.jpg" width="140" height="140" radius="6" />
              </s-col>
              <s-col flex="1">
                <view class="s-ellipsis" style="font-size: 28rpx">
                  商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题
                </view>
                <view style="font-size: 24rpx; color: #999; margin-top: 8rpx">描述信息</view>
                <view style="font-size: 24rpx; margin-top: 10rpx">¥2.00</view>
              </s-col>
            </s-row>
          </view>
          <view slot="right" style="height: 100%">
            <s-button type="danger" shape="square" height="100%" text="删除" />
            <s-button type="primary" shape="square" height="100%" text="收藏" />
          </view>
        </s-swipe-action>
      </c-demo-block>

      <c-demo-block title="手动控制">
        <s-swipe-action v-model="value">
          <view slot="left" style="height: 100%">
            <s-button type="primary" shape="square" height="100%" text="左边" />
          </view>
          <s-cell title="单元格" :border="false" />
          <view slot="right" style="height: 100%">
            <s-button type="danger" shape="square" height="100%" text="右边" />
          </view>
        </s-swipe-action>

        <view style="margin-top: 30rpx">
          <s-tabs
            v-model="value"
            :list="[
              { label: '左边', value: 'left' },
              { label: '右边', value: 'right' },
              { label: '关闭', value: '' },
            ]"
            value-key="value"
            :show-line="false"
          />
        </view>
      </c-demo-block>

      <c-demo-block title="不自动关闭">
        <s-swipe-action :auto-close="false">
          <s-cell title="单元格" :border="false" />
          <view slot="right" style="height: 100%">
            <s-button type="danger" shape="square" height="100%" text="删除" />
            <s-button type="primary" shape="square" height="100%" text="收藏" />
          </view>
        </s-swipe-action>
      </c-demo-block>

      <c-demo-block title="禁用">
        <s-swipe-action disabled>
          <s-cell title="单元格" :border="false" />
          <view slot="right" style="height: 100%">
            <s-button type="danger" shape="square" height="100%" text="删除" />
            <s-button type="primary" shape="square" height="100%" text="收藏" />
          </view>
        </s-swipe-action>
      </c-demo-block>

      <c-demo-block title="事件">
        <s-swipe-action @open="onOpen" @close="onClose">
          <view slot="left" style="height: 100%">
            <s-button type="primary" shape="square" height="100%" text="左边" />
          </view>
          <s-cell title="单元格" :border="false" />
          <view slot="right" style="height: 100%">
            <s-button type="danger" shape="square" height="100%" text="右边" />
          </view>
        </s-swipe-action>
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    value: '',
  }),
  methods: {
    onOpen(value) {
      uni.showToast({
        title: '打开' + value,
        mask: false,
      });
    },
    onClose(value) {
      uni.showToast({
        title: '关闭' + value,
        mask: false,
      });
    },
  },
};
</script>

<style lang="scss">
.SwipeAction-Page {
  height: 120vh;
  ::v-deep {
    .c-demo-block {
      &__title {
        padding-left: $padding-md;
      }
    }
  }
}
</style>
